import { ref } from 'vue';
import { useTable, LIST_TYPE } from '@crud/index';
import { getList } from '@/api/crm-kgj/invest-claim';
import { optionsProductStatus, optionsBaiyinProductStatus, optionsContactStatus } from '@/config/index';

import { toolOptions2Map } from '@/utils';
// 关联类型
const relevanceStatus = [
  { label: '不限', value: -1 },
  { label: '商家', value: 1 },
  { label: '团长', value: 2 }
];

export const useData = () => {
  const statusOptions = ref(optionsProductStatus);
  const statusMap = toolOptions2Map(statusOptions.value);

  const baiyinStatusOptions = ref(optionsBaiyinProductStatus);
  const baiyinStatusMap = toolOptions2Map(baiyinStatusOptions.value);

  const contactStatusOptions = ref(optionsContactStatus);

  const relevanceStatusOption = ref(relevanceStatus);
  const relevanceStatusMap:any = toolOptions2Map(relevanceStatusOption.value);

  return {
    statusOptions,
    statusMap,
    baiyinStatusOptions,
    baiyinStatusMap,
    contactStatusOptions,
    relevanceStatusOption,
    relevanceStatusMap
  };
};
export const useTableList = () => {
  const { baiyinStatusMap, relevanceStatusMap } = useData();

  const columns = [
    { label: '商品信息', prop: 'product', width: 300, render: 'product' },
    { label: '店铺', prop: 'shop', align: 'center', minWidth: 120, render: 'shop' },
    { label: '价格', prop: 'price', align: 'right', minWidth: 120, type: 'priceCent' },
    { label: '佣金率', prop: 'cos_ratio', align: 'right', minWidth: 120, render: (s: any) => (s.row.cos_ratio == undefined ? '-' : s.row.cos_ratio + '%') },
    { label: '联系方式', prop: 'shop_mobile', align: 'left', minWidth: 180, render: 'shop_mobile' },
    { label: '关联达人/销量', prop: 'relate_gmv', align: 'center', minWidth: 180, render: 'relate_gmv' },
    { label: '服务费', prop: 'service_ratio', align: 'center', minWidth: 120, render: 'service_ratio' },
    {
      label: '商品状态',
      prop: 'is_sold_out',
      align: 'center',
      render: (s: any) => (s.row.is_sold_out ? '已下架' : '已上架'),
      minWidth: 120
    },
    { label: '关联类型', prop: 'relate_type', align: 'center', minWidth: 100, render: (s: any) => relevanceStatusMap[s.row?.relate_type] || '-' },
    { label: '认领时间', prop: 'claim_time', align: 'center', minWidth: 180, type: 'dateTime', sortable: true, sortOrders: [0] },
    {
      label: '百应商品状态',
      prop: 'status',
      align: 'center',
      render: (s: any) => baiyinStatusMap[s.row.status] || '-',
      minWidth: 120
    },
    { label: '工作人员', prop: 'user_name', align: 'center', minWidth: 120 },
    { label: '备注', prop: 'remark', align: 'center', minWidth: 160, ellipsis: true, showOverflowTooltip: true },
    { label: '操作', align: 'center', width: 240, render: 'actions', fixed: 'right' }
  ];

  return useTable({
    type: LIST_TYPE.KGJ,
    params: {
      sort_field: 'claim_time',
      sort: 1,
      keyword: undefined,
      shop_name: undefined,
      relate_type: undefined,
      status: undefined,
      has_mobile: undefined,
      user_id: undefined
    },
    getParams: (params) => {
      return params;
    },
    columns,
    getList
  });
};
